<!--  -->
<template>
    <div class='swiper'>
        <p style="text-align: center; font-weight: 600;">首页</p>
      
            <mt-swipe :auto="4000">
                <mt-swipe-item>
                    <img :src="pid1" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                     <img :src="pid2" alt="">
                </mt-swipe-item>
              
            </mt-swipe>
     
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from 'vue'
import { Swipe, SwipeItem }  from 'mint-ui';
import  service from "../utils/request.js"
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
          pid1:"",
          pid2:""
        };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    beforeMount() { }, //生命周期 - 挂载之前
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        let that=this;
     service(
        {
            url: "banner",
            method:"get"
        }
     ).then(res=>{
        that.pid1=res.data.data[0].pic
        that.pid2=res.data.data[1].pic
        console.log(that.pid1);
     })
    },
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，激活
    deactivated() { }, //如果页面有keep-alive缓存功能，非激活
}
</script>
<style lang="less">
.swiper {
    width: 360px;
    height: 160px;
    background-color: white;
    margin: 0 auto;
    img{
        width: 360px;
        height: 150px;
    }
}
.mint-swipe-indicators {
    bottom: 15px !important;
}
</style>